When I was making my rickroll website (rick.uthmn.com) I first got my actual rickroll video
here
After that, I added a <video> tags to the code and then inside I added 2 <source> tags inside,
the first to make it load faster,
by loading the video from the websites files and the 2nd was loading from a url which is slower
but means you only need index.html when downloading the site.
You can do the same for the audio just using <audio> tags instead.
I also added a favicon to the website using a <link> tag inside the <head> tag
and a <title> tag to polish things off.
You might think im done here but from there a problem emerges!
Autoplay blocks audio from the rickroll!
"The problem here is rickrolls are supposed to catch you by surprise and
with audio blocked it is basically telling you its a rickroll" - Sherlock Holmes
To fix this problem, you need to add this code:
<script>
// Check if the audio is muted due to browser restrictions
var audio = document.getElementById("audioContainer");
var promise = audio.play();
if (promise !== undefined) {
promise.then(_ => {
// Autoplay started!
}).catch(error => {
// Autoplay was prevented.
// You can try to play the audio again on user interaction.
document.addEventListener('click', function() {
audio.play();
});
});
}
<script>
Now if I am being honest, I have no idea what this does but just add it.
Full source code: https://github.com/UTHMN/rick
If everything went right, you can see a preview here: